<template>
    <div class="page-container">
        <div class="page-layout">
            <div class="page-layout-header">
                <div class="header-aside flex-start-title">
                    <div class="title">{{ $t('platform.setting.titleSide') }}</div>
                    <!--<div class="option">
                        <div class="icon" :title="$t('platform.setting.tree.create-root')" @click="$refs.tree.dialogNodeOption('create-root')">
                            <i class="el-icon-plus"></i>
                        </div>
                    </div>-->
                </div>
                <div class="header-main">
                    <div class="title">{{ $t('platform.setting.title') }}</div>
                </div>
            </div>
            <div class="page-layout-body">
                <div class="body-aside">
                    <!--平台管理-->
                    <platform-org ref="tree" @click="treeSelectNode"></platform-org>
                </div>
                <div class="body-main">
                    <vue-simplebar>
                        <div v-show="tree.id != null">
                            <!--基本信息-->
                            <platform-info :tree="tree"></platform-info>
                            <!--平台配置-->
                            <platform-config :tree="tree" @update="updateConfig"></platform-config>
                            <!--IP白名单【转入转出】-->
                            <platform-ip :tree="tree" v-if="config.id != null"></platform-ip>
                            <!--访问密钥【转入转出】-->
                            <platform-access-key :tree="tree" v-if="config.id != null" :config="config" @update="updateAccessKey"></platform-access-key>
                            <!--访问密钥【无缝钱包】-->
                            <platform-wallet :tree="tree" v-if="config.id != null && config.payment == 2 && accessKey.id != null"></platform-wallet>
                            <!--访问密钥【无缝钱包】【实时】-->
                            <platform-wallet-timely :tree="tree" v-if="config.id != null && config.payment == 3 && accessKey.id != null"></platform-wallet-timely>
                            <!--接入游戏-->
                            <platform-games :tree="tree" v-if="config.id != null" :config="config"></platform-games>
                            <!--游戏UI设置-->
                            <platform-config-ui :tree="tree" v-if="config.id != null" :config="config"></platform-config-ui>
                            <!--各种配置-->
                            <!--<div class="container-content">
                                <div class="container-content-title">{{ $t('platform.setting.other.title') }}</div>
                                ...
                            </div>-->
                        </div>
                    </vue-simplebar>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import PlatformOrg from './Org.vue'
import PlatformInfo from './Info.vue'
import PlatformConfig from './Config.vue'
import PlatformConfigUi from './ConfigUi.vue'
import PlatformIp from './Ip.vue'
import PlatformAccessKey from './AccessKey.vue'
import PlatformWallet from './Wallet.vue'
import PlatformWalletTimely from './WalletTimely.vue'
import PlatformGames from './Games.vue'

export default {
    components: {
        PlatformOrg,
        PlatformInfo,
        PlatformConfig,
        PlatformConfigUi,
        PlatformIp,
        PlatformAccessKey,
        PlatformWallet,
        PlatformWalletTimely,
        PlatformGames,
    },
    data() {
        return {
            tree: {},
            config: {},
            accessKey: {},
        }
    },
    methods: {
        treeSelectNode(data) {
            // 缓存数据
            this.tree = data;
            // 初始配置
            this.config = {};
        },
        updateConfig(config) {
            // 平台配置
            this.config = config;
        },
        updateAccessKey(accessKey) {
            // 访问密钥
            this.accessKey = accessKey;
        },
    }
}
</script>

<style lang="scss" scoped>
.header-aside .icon {
    flex-shrink: 0;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    color: $font-color-third;
}

.header-aside .icon:hover {
    color: $font-color-second;
}

::v-deep .container-content {
    padding: 20px;
}

::v-deep .container-content-title {
    margin-bottom: 20px;
    border-bottom: 1px solid $boder-color-third;
    padding-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: $font-color-first;
}
</style>
